<template>
  <el-table
      :data="tableData"
      :span-method="objectSpanMethod">
    <el-table-column
        label="名称"
        prop="label"
        width="300"
        fixed
    >
    </el-table-column>
    <el-table-column
        prop="label"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="label"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="label"
        label="姓名"
        width="180">
    </el-table-column>
  </el-table>
</template>
<script>
import {arrList} from "@/utils/mock";

export default {
  data() {
    return {
      tableData: [],
      // 假设这部分为服务端数据
      treeData: arrList
    }
  },
  created() {
    // 转换树形结构的数据，用来方便拆分合并单元格
    this.tableData = []
    this.treeData.forEach(i => {
      if (i.children) {
        i.children.forEach(j => {
          j.parentId = i.value
        })
      }
      if (i.children) {
        this.tableData.push(...i.children)
      } else {
        this.tableData.push(i)
      }
    })
  },
  methods: {
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        console.log('this.treeData=>', this.treeData)
        const parent = this.treeData.find(i => i.value === row.parentId)
        if (parent && row.value === parent.children[0].value) {
          return {
            rowspan: parent.children.length,
            colspan: 1
          }
        } else if (parent && row.value !== parent.children[0].value) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }

    }
  }
}
</script>
